<template>
  <div class="contains">
    <a-breadcrumb
      style="font-size: 18px; font-weight: bold; margin-bottom: 20px"
    >
      <a-breadcrumb-item>链上市场</a-breadcrumb-item>
      <a-breadcrumb-item>所有交易</a-breadcrumb-item>
    </a-breadcrumb>
    <a-form layout="inline" :model="getDataDto">
      <a-form-item>
        <a-select
          ref="select"
          v-model:value="getDataDto.default_id"
          style="width: 120px"
          placeholder="违约情况"
        >
          <a-select-option value="0">未违约</a-select-option>
          <a-select-option value="1">买方违约</a-select-option>
          <a-select-option value="2">卖方违约</a-select-option>
          <a-select-option value="3">双方均违约</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="clear()"> 重 &nbsp; 置 </a-button>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="getDate()">
          <template #icon><SearchOutlined /></template>
          搜 &nbsp; 索
        </a-button>
      </a-form-item>
    </a-form>
    <a-divider />
    <div style="margin: 0 auto; text-align: center">
      <a-typography-title :level="3">交易流水</a-typography-title>
    </div>
    <a-table :columns="columns" :data-source="data">
      <template #default_id="{ text }">
        {{
          text == 0
            ? "未违约"
            : text == 1
            ? "买方违约"
            : text == 2
            ? "卖方违约"
            : text == 3
            ? "双方均违约"
            : "交易未完成"
        }}
      </template>
      <template #action="{ record }">
        <span>
          <a @click="detail(record.trade_id)">详情</a>
          <!-- <a-divider type="vertical" />
          <a class="ant-dropdown-link">
            更多
            <down-outlined />
          </a> -->
        </span>
      </template>
    </a-table>
  </div>
</template>
<script>
import {
  SmileOutlined,
  DownOutlined,
  SearchOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, ref, reactive } from "vue";
import { get, post } from "@/common";
import { useRouter, useRoute } from "vue-router";
const columns = [
  {
    title: "交易记录ID",
    dataIndex: "trade_id",
    key: "trade_id",
    ellipsis: true,
  },
  {
    title: "买方",
    dataIndex: "buyer",
    key: "buyer",
    ellipsis: true,
  },
  {
    title: "卖方",
    dataIndex: "seller",
    key: "seller",
    ellipsis: true,
  },
  {
    title: "交易时间",
    dataIndex: "trade_time",
    key: "trade_time",
  },
  {
    title: "成交价格",
    dataIndex: "price",
    key: "price",
  },
  {
    title: "合约电量",
    dataIndex: "contract_elec",
    key: "contract_elec",
  },
  {
    title: "卖方实际出电量",
    key: "output_elec",
    dataIndex: "output_elec",
  },
  {
    title: "买方实际用电量",
    key: "use_elec",
    dataIndex: "use_elec",
  },
  {
    title: "违约情况",
    key: "default_id",
    dataIndex: "default_id",
    slots: {
      customRender: "default_id",
    },
  },
  {
    title: "操作",
    key: "action",
    slots: {
      customRender: "action",
    },
  },
];
export default defineComponent({
  setup() {
    const router = useRouter();
    const detail = (trade_id) => {
      router.push({
        path: "/home/market/tradeDetail",
        query: { trade_id: trade_id },
      });
    };
    const data = ref();
    const getDataDto = reactive({
      default_id: undefined,
    });
    const getDate = () => {
      get("/trade/tradeInfo/", getDataDto).then((res) => {
        data.value = res.data;
      });
    };
    const clear = () => {
      getDataDto.default_id = undefined;
    };
    getDate();
    return {
      router,
      detail,
      clear,
      getDataDto,
      data,
      columns,
      getDate,
    };
  },

  components: {
    SearchOutlined,
    SmileOutlined,
    DownOutlined,
  },
});
</script>
<style>
.contains {
  padding: 10px;
}
</style>